<template>
  <el-dialog title="编辑角色" :visible="visible" width="30%" @close="handleCancel">
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="角色名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="角色码" :label-width="formLabelWidth" prop="code">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="form.remark" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option label="启用" value="1" />
          <el-option label="停用" value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateRoleAPI, confirmRoleCodeAPI } from '@/api/role'
import { Message } from 'element-ui'
export default {
  name: 'EditRoleForm',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    initialData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {

      rules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '角色码不能为空', trigger: 'blur' },
          { validator: this.validateRoleCode, trigger: 'blur' }
        ]
      },

      form: { ...this.initialData },

      formLabelWidth: '120px'

    }
  },
  watch: {
    initialData: {
      handler(newVal) {
        this.form = { ...newVal }
      },
      deep: true
    }
  },
  methods: {

    handleCancel() {
      this.$emit('update:visible', false)
    },
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.handleConfirmSubmitEditRole()
          this.$emit('update:visible', false)
        } else {
          Message.warning('本次操作失败')
        }
      })
    },
    // 修改角色
    handleConfirmSubmitEditRole() {
      // 调用异步函数并等待结果
      updateRoleAPI(this.form)
        .then(response => {
          if (response === true) {
            Message.success('修改角色成功')
          } else {
            Message.warning('请求发送成功，但修改用户失败')
          }
        })
        .catch(error => {
          // eslint-disable-next-line no-undef
          callback(error)
        })
    },

    // 验证当前角色码是否可用
    validateRoleCode(rule, value, callback) {
      if (!value) {
        callback(new Error('角色码不能为空'))
      } else {
        const code = this.form.code
        confirmRoleCodeAPI({ code: code, roleId: this.form.id })
          .then(response => {
            if (response === 'unusable') {
              callback(new Error('角色码已存在'))
            } else {
              callback()
            }
          })
          .catch(error => {
            callback(error)
          })
      }
    }

  }
}
</script>

<style scoped>
/* 添加任何需要的样式 */
</style>
